
// 车流分析
export const getChartTrafficOption = (chatDataX,dataYsBuss,dataYbBuss) => {
  const option = {
    title: {
      text: '车流统计分析'
    },
    legend: {
      data: ['小型车', '大型车'],
      left: '40%',
      top:"1%",
      itemWidth:12,
      itemGap:6
    },
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '1%',
      right: '1%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
      axisLabel:{
        interval:1,
        rotate: -75
      }
    },

    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color:"#3273dc"
        },
        lineStyle: {
          color:"#3273dc"
        },
        name:"小型车",
        data: dataYsBuss,
        type: 'line',
        smooth: false,
        connectNulls: true
      },

      {
        itemStyle: {
          color:"#ffba00"
        },
        lineStyle: {
          color:"#ffba00"
        },
        name:"大型车",
        data: dataYbBuss,
        type: 'line',
        smooth: false,
        connectNulls: true
      }
    ],
  }
  return option
};

//车辆所属省份分布图
export const getChartMapOption = (mapData,maxNum,isShowTitle = true) => {
  const option = {
    title: {
      show:isShowTitle ? true : false,
      text: '车辆所属省市分布图',
    },
    visualMap: {
      min:10,
      max:maxNum,
      text:[maxNum, '1'], 
      hoverLink:true, 
      orient:"vertical",     //图例排列方式:vertical:竖向,  horizontal:横向         
      precision:0,
      inRange: {
        color: ['#FF7624', "#FFF8F5"],
      },
      textStyle: {
        color: '#000'
      },
      left: '8%',
    },
    tooltip: {
      show: true, //是否显示提示标签
      trigger: 'item',
      backgroundColor:"#f89c34",//提示标签背景颜色
      textStyle:{color:"#fff"}, //提示标签字体颜色
      borderColor: '#f89c34',
      borderWidth: '1',
      formatter:(params) => {
        return params.name + ' : ' + (Number(params.value) > 0 ? params.value : '0')
      }
    },
    // geo: {
    //   map: 'china',
    //   itemStyle: {
    //     areaColor: '#000',
    //     borderWidth: 1,
    //     borderColor: '#fff',
    //     emphasis: {
    //       borderWidth: 2,
    //       borderColor: '#fff',
    //       areaColor: '#000',
    //       label: { show: false }
    //     }
    //   },
    //   label: {
    //     emphasis: {
    //       show: false
    //     }
    //   }
    // },
    
    grid: {
      top: '50%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
   
    // dataRange: { // 数值范围对应的 取色
    //     x: 'left',
    //     y: 'bottom',
    //     show: true,
    //     splitList: [
    //         { start: 20000, color: '#CB000C' },
    //         { start: 10001, end: 20000, color: '#f1658b' },
    //         { start: 5001, end: 10000, color: 'rgba(247,168,190,.8)' },
    //         { end: 5000, color: '#fae8e9' }
    //     ],
    //     color: ['#fae8e9', '#f7a8be', '#f1658b ', '#CB000C']
    // },
    series: [
      {
        type: 'map',
        map: 'china',
        coordinateSystem: 'geo',
        mapType: 'china',
        symbolSize: 12,
        zoom: 1.5,
        top: '25%',
        right:"3%",
        // roam:"move",
        itemStyle: {
          areaColor: '#fff', //地图的颜色
          borderColor: 'rgba(60,70,88,.5)', //边界线颜色
          borderWidth: '.5', //边界线宽
          normal: {
            borderWidth: .5,//区域边框宽度
            borderColor: '#666',//区域边框颜色
            areaColor:"#fff",//区域颜色
          },
          emphasis: { // 对应的鼠标悬浮效果
            textStyle:{color:"#000"},
            color: '#FF0000',
            areaColor: '#f89c34',
            borderColor: '#FFF',
            borderWidth: 1
          }
        },
        label: {
            fontSize: 12,
            normal: {
              show: false, // 是否显示省份标签
              color: '#000',
              textStyle:{color:"#000"},//省份标签字体颜色
              formatter: '{b}',
              position: 'center',
            },
            emphasis: {
                show: false, // 鼠标 hover 时是否显示身份标签
                textStyle: {
                  color: '#000'
                },
            },
        },
        data: mapData
      }
    ]
  }
  return option
}

//车辆品牌分析
export const getBrandOption = function(brandData) {
  const option = {
    title: {
      text: '车辆品牌分析'
    },
    tooltip: {
      formatter: "{b}: {c} ({d}%)",
      confine: false,
      appendToBody: false,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['35%', '60%'],
        avoidLabelOverlap: false,
        label: {
          normal: {
            textStyle: {
              fontSize: 10
            },
            formatter: "{b}: {c}"
          },
        },
        data: brandData
      }
    ]
  };
  return option
}

//车辆等级分析
export const getGradeOption = function(gradeData) {
  const option = {
    title: {
      text: '车辆等级分析',
      subtext:"品牌等级：",
      subtextStyle:{
        color:'#333',
        fontSize:12,
        height:40,
        lineHeight: 36,
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      show: true,
      icon: 'circle',  
      top: '10%',
      bottom: '5%',
      left: '18%',
      itemWidth:12,
      itemGap:6
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['35%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: gradeData
      }
    ]
  }
  return option
}

//车辆品牌停留时长分析
export const getDurationOption = (chatData,chatDataX,chatDataHigh,chatDataMiddle,chatDataLow,chatDataOther) => {
  const option = {
    title: {
      text: '车辆品牌停留时长分析',
      subtext:"品牌等级：",
      subtextStyle:{
        color:'#333',
        fontSize:14,
        width:200,
        height:40,
        lineHeight: 36,
        align:'right',
      }
    },
    legend: {
      icon: 'circle',
      data: ['高', '中','低','其它'],    
      top: '10%',
      bottom: '5%',
      left: '18%',
      itemWidth:12,
      itemGap:6
    },
    tooltip: {
      trigger: 'item',
      formatter:(params) => {
        return `车辆品牌:${params?.data?.carBrandName}</br>载客数量:${params?.data?.carryingCapacity}</br>消费水平:${params?.value}`
      }
      // formatter: "车辆等级:{a}</br>平均停留时长:{b} </br>消费水平:{c}",
    },
    grid: {
      top:"25%",
      left: '3%',
      right: '14%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        name: '时长(分钟)',
        type: 'category',
        data: chatDataX,
        axisLabel:{
          interval:0,
          rotate: -60
        }
      }
    ],
    yAxis: [
      {
        name: '消费水平(V)',
        type: 'value'
      }
    ],
    series: [
      {
        type: 'scatter',
        name:"高",
        // data: [
        //   [1, 6],
        //   [2, 5],
        //   [3, 4],
        //   [4, 3],
        //   [5, 2]
        // ]
        data: chatDataHigh
      },

      {
        type: 'scatter',
        name:"中",
        data: chatDataMiddle
      },

      {
        type: 'scatter',
        name:"低",
        data: chatDataLow
      },
      {
        type: 'scatter',
        name:"其它",
        data: chatDataOther
      }
    ]
  }
  return option
}

//车型分析
export const getChartModelOption = (chatDataX,chatDataY) =>{
  const option = {
    title: {
      text: '车型分析',
    },
    tooltip: {
      trigger: 'axis',
      // formatter: "车型:{b} </br>载客量:{c}",
      formatter: (params) =>{
        return "车型:" + params[0]?.name + "</br>载客量:" + params[0]?.value + "</br>消费水平:" + params[0]?.data?.amount
      },
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          width: '2',
          barGap: '0%', 
        }
      }
    },
    grid: {
      left: '0%',
      right: '0%',
      bottom: '3%',
      containLabel: true
    },
    dataZoom : [
      {
        show: true, //是否显示滑动条
        type: "inside", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        xAxisIndex: [0],
        startValue: 0, // 从头开始。
        bottom:20
      }
          
    ],
    xAxis: [
      {
        type: 'category',
        data: chatDataX,
        axisTick: {
          alignWithLabel: "shift"
        },
        axisLabel:{
          interval:0,
          rotate: -60
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '30%',
        data: chatDataY,
        itemStyle: {
          color: '#f89c34',
          barGap: '0%', // 或者一个具体的像素值，如 '5px'
        },
        label: { //柱体上显示数值
          show: true,//开启显示
          position: 'top',//在上方显示
          textStyle: {//数值样式
            fontSize: '12px',
            color: '#666'
          },
          formatter: '{c}',
        }
      }
    ]
  };
  return option
}

// 小客车车位分析
export const getChartSBussOption = (chatDataX,dataYsBuss) => {
  const option = {
    title: {
      text: '小型车剩余车位'
    },
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
    },

    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color:"#3273dc"
        },
        lineStyle: {
          color:"#3273dc"
        },
        name:"小型车",
        type: 'line',
        smooth: true,
        data: dataYsBuss,
      }
    ],
  }
  return option
};

// 大型车位分析
export const getChartBBussOption = (chatDataX,dataYbBuss) => {
  const option = {
    title: {
      text: '大型车剩余车位'
    },
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
    },

    yAxis: {
      type: 'value',
    },
    series: [
      {
        itemStyle: {
          color:"#3273dc"
        },
        lineStyle: {
          color:"#3273dc"
        },
        name:"大型车",
        type: 'line',
        smooth: true,
        data: dataYbBuss,
      }
    ],
  }
  return option
};


// 超出车位分析
export const getChartOverParkOption = (chatDataX,dataYsBuss,dataYbBuss) => {
  const option = {
    title: {
      text: '超出车位使用分析'
    },
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['小客车', '大型车']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
      splitLine: {
        show: false
      }
    },

    yAxis: {
      type: 'value',
    },
    series: [
      {
        name:"大型车",
        type: 'bar',
        stack: 'same',
        data: dataYbBuss,
        emphasis: {
          focus: 'series'
        },
        animationDelay: function (idx) {
          return idx * 10;
        }
      },
      {
        name: '小客车',
        type: 'bar',
        stack: 'same',
        data: dataYsBuss,
        emphasis: {
          focus: 'series'
        },
        animationDelay: function (idx) {
          return idx * 10 + 100;
        }
      }
    ],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
  }
  return option
};


//出入口客流分析
export const getChartPassengerFlowOption = (chatDataX,chatDataY) => {
  const option = {
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis',
      formatter: "时间: {b}<br>客流: {c}",
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
    },

    yAxis: {
      type: 'value',
      name: '客流数(人)',
    },
    series: [
      {
        type: 'line',
        data: chatDataY,
      }
    ],
  }
  return option
};

// 男女比例分析
export const getSexRadioOption = (chatData,isShowTitle= true) => {
  const option = {
    title: {
      show:isShowTitle ? true : false,
      text: '男女比例分析',
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      show: true,
      orient: 'vertical',
      icon: 'circle',
      data: ['男性', '女性'],
      formatter:(name) => {
        return name + '：' + chatData.find(ele => ele?.name == name)?.value
      },
      top: 'center',
      bottom: '5%',
      left: '55%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['25%','45%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: chatData
      }
    ]
  }
  return option
}

// 年龄段分布
export const getAgeGroupOption = (chatData,isShowTitle = true)  =>{
  const option = {
    title: {
      show:isShowTitle ? true : false,
      text: '年龄段分布',
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      show: true,
      orient: 'vertical',
      icon: 'circle',
      data: ['29岁及以下', '29-59岁', '60岁及以上'], 
      formatter:(name) => {
        return name + '：' + chatData.find(ele => ele?.name == name)?.value
      },
      top: 'center',
      bottom: '5%',
      left: '55%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['25%','45%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: chatData
      }
    ]
  }
  return option
}

// 店铺客流

// 销售额-性别分析
export const getSaleSexOption = function(chatData) {
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: "{b}: {c} ({d}%)",
    },
    legend: {
      show: true,
      data: ['男', '女'],    
      top: '10%',
      bottom: '5%',
      left: 'center',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['20%', '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: chatData
      }
    ]
  }
  return option
}
//客单额分析
export const getChartOrderAmountOption = (chatDataNewX,chatDataOldX,chatDataX,chatDataY) =>{
  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: (params) =>{
        if(params[0]?.name == "老顾客"){
          return params[1]?.name + params[1]?.value
        }
        if(params[0]?.name == "新顾客"){
          return params[0]?.name + params[0]?.value
        }
      },
      axisPointer: {
        shadowStyle: {
          width: '10',
          barGap: '0%', 
        }
      }
    },
    legend: {
      show: true,
      data: ['新顾客', '老顾客'], 
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis:
      {
        type: 'value',
        // axisTick: {
        //   alignWithLabel: true
        // }
      }
    ,
    yAxis: 
      {
        type: 'category',
        data: chatDataY
      },

    series: [
      {
        type: 'bar',
        barWidth: '20%',
        name:"新顾客",
        data: chatDataNewX,
        label: { //柱体上显示数值
          show: true,//开启显示
          position: 'top',//在上方显示
          textStyle: {//数值样式
            fontSize: '12px',
            color: '#666'
          },
          formatter: '{c}',
        }
      },

      {
        type: 'bar',
        barWidth: '20%',
        name:"老顾客",
        data: chatDataOldX,
        label: { //柱体上显示数值
          show: true,//开启显示
          position: 'top',//在上方显示
          textStyle: {//数值样式
            fontSize: '12px',
            color: '#666'
          },
          formatter: '{c}',
        }
      }
    ]
  };
  return option
}

// 即时客流分析
export const getChartRealOption = (chatDataX,dataYToday,dataYYesterday,dataYLastWeek) => {
  const option = {
    legend: {
      data: ['今天', '昨天','上周同天']
    },
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
    },

    yAxis: {
      type: 'value',
    },
    series: [
      {
        name:"今天",
        data: dataYToday,
        type: 'line',
        smooth: false
      },

      {
        name:"昨天",
        data: dataYYesterday,
        type: 'line',
        smooth: false
      },
      {
        name:"上周同天",
        data: dataYLastWeek,
        type: 'line',
        smooth: false
      }
    ],
  }
  return option
};

// 顾客类型分析
export const getCustomerTypeOption = (chatData) => {
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: "{b}({d}%)",
    },
    legend: {
      show: true,
      orient: 'vertical',
      icon: 'circle',
      top: 'center',
      bottom: '5%',
      left: '60%',
    },
    grid: {
      left: '1%',
      right: '1%',
      bottom: '3%',
      containLabel: true
    },
    series: [
      {
        type: 'pie',
        radius: ['25%', '45%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: true,
        startAngle:150,
        minAngle:15,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: chatData
      }
    ]
  }
  return option
}

//各时间段到店人数
export const getChartVisitorsOption = (chatDataX,chatDataYnew,chatDataYold,chatDataYvip,chatDataYtotal) =>{
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          width: '10',
          barGap: '0%', 
        }
      }
    },
    legend: {
      left: 'right',
      data: ['新顾客', '老顾客', '会员', '总数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: chatDataX,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        type: 'bar',
        stack: 'same',
        barWidth: '30%',
        name:"新顾客",
        data: chatDataYnew
      },

      {
        type: 'bar',
        stack: 'same',
        name:"老顾客",
        barWidth: '30%',
        data: chatDataYold
      },

      {
        type: 'bar',
        stack: 'same',
        name:"会员",
        barWidth: '30%',
        data: chatDataYvip
      },

      {
        type: 'line',
        name:"总数",
        data: chatDataYtotal,
        label: { //柱体上显示数值
          show: true,//开启显示
          position: 'top',//在上方显示
          textStyle: {//数值样式
            fontSize: '12px',
            color: '#666'
          },
          formatter: '{c}',
          smooth: false
        }
      }
    ]
  };
  return option
}

// 客户滞留时间分析
export const getChartResidenceOption = (chatDataX,chatDataYnew,chatDataYold,chatDataYvip,chatDataYtotal) => {
  const option = {
    legend: {
      data: ['新顾客', '老顾客', '会员', '总数'],
    },
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      top:"18%",
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
    },

    yAxis: {
      type: 'value',
      name:"单位(min)",
    },
    series: [
      {
        name:"新顾客",
        data: chatDataYnew,
        type: 'line',
        smooth: false
      },

      {
        name:"老顾客",
        data: chatDataYold,
        type: 'line',
        smooth: false
      },

      {
        name:"会员",
        data: chatDataYvip,
        type: 'line',
        smooth: false
      },

      {
        name:"总数",
        data: chatDataYtotal,
        type: 'line',
        smooth: false
      }
    ],
  }
  return option
};

// 店铺运营分析
export const getChartOperateOption = (chatDataX,chatCustomer,chatOuter,chatVisitRatio,chatPerCustTransaction,chatSaleAmount,chatOrderNum,chatSaleNum) => {
  const option = {
    title: {
      text: '店铺运营分析'
    },
    legend: {
      show: true,
      data: ['客流', '店外客流', '进店率', '客单价', '销售额', '订单数', '销售数量']
    },
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    
    xAxis: {
      type: 'category',
      data: chatDataX,
    },

    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true
        }
      },

      {
        type: 'value',
        name: '进店率',
        position: 'right',
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle:{
            color:'rgb(250, 200, 88)'
          }
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
    ],
    series: [
      {
        data: chatCustomer,
        name:"客流",
        type: 'line',
        smooth: false
      },

      {
        data: chatOuter,
        name:"店外客流",
        type: 'line',
        smooth: false
      },
      {
        data: chatVisitRatio,
        name:"进店率",
        type: 'line',
        smooth: false,
        yAxisIndex: 1
      },
      {
        data: chatPerCustTransaction,
        name:"客单价",
        type: 'line',
        smooth: false
      },

      {
        data: chatSaleAmount,
        name:"销售额",
        type: 'line',
        smooth: false
      },
      {
        data: chatOrderNum,
        name:"订单数",
        type: 'line',
        smooth: false
      },

      {
        data: chatSaleNum,
        name:"销售数量",
        type: 'line',
        smooth: false
      }
    ],
  }
  return option
};

// 热点分析
export const getChartHotOption = (data,imageSize) => {
  // const renderItem = (params, api) =>{
  //   if (params.context.rendered) {
  //     return
  //   }
  //   params.context.rendered = true

  //   var points = []
  //   for (var i = 0; i < data.length; i++) {
  //     points.push(api.coord(data[i]))
  //   }
  //   var color = api.visual('color')

  //   return {
  //     type: 'polygon',
  //     shape: {
  //       points: echarts.graphic.clipPointsByRect(points, {
  //         x: params.coordSys.x,
  //         y: params.coordSys.y,
  //         width: params.coordSys.width,
  //         height: params.coordSys.height
  //       })
  //     },
  //     style: api.style({
  //       fill: color,
  //       stroke: echarts.color.lift(color)
  //     })
  //   }
  // }
  var data = [
    [0, 0, 10],
    [0, 1, 20],
    [0, 2, 30],
    // 其他数据...
  ];
  const option = {
    //鼠标悬浮提示
    tooltip: {
      trigger: 'axis'
    },

    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },

    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五']
    },
    yAxis: {
      type: 'category',
      data: ['早上', '中午', '晚上']
    },
    series: [{
      type: 'heatmap',
      data: data
    }]
  }
  return option
};

export const getChartHotMapOption = (data,imageSize) => {
  let noise = getNoiseHelper();
  let xData = [];
  let yData = [];
  noise.seed(Math.random());
  function generateData(theta, min, max) {
    let data = [];
    for (let i = 0; i <= 200; i++) {
      for (let j = 0; j <= 100; j++) {
        // let x = (max - min) * i / 200 + min;
        // let y = (max - min) * j / 100 + min;
        data.push([i, j, noise.perlin2(i / 40, j / 20) + 0.5]);
        // data.push([i, j, normalDist(theta, x) * normalDist(theta, y)]);
      }
      xData.push(i);
    }
    for (let j = 0; j < 100; j++) {
      yData.push(j);
    }
    return data;
  }
  let chartData = generateData(2, -5, 5);

  function getNoiseHelper() {
    class Grad {
      constructor(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
      }
      dot2(x, y) {
        return this.x * x + this.y * y;
      }
      dot3(x, y, z) {
        return this.x * x + this.y * y + this.z * z;
      }
    }
    const grad3 = [
      new Grad(1, 1, 0),
      new Grad(-1, 1, 0),
      new Grad(1, -1, 0),
      new Grad(-1, -1, 0),
      new Grad(1, 0, 1),
      new Grad(-1, 0, 1),
      new Grad(1, 0, -1),
      new Grad(-1, 0, -1),
      new Grad(0, 1, 1),
      new Grad(0, -1, 1),
      new Grad(0, 1, -1),
      new Grad(0, -1, -1)
    ];
    const p = [
      151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140,
      36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120,
      234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33,
      88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71,
      134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133,
      230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161,
      1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130,
      116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250,
      124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227,
      47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44,
      154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98,
      108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34,
      242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14,
      239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121,
      50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243,
      141, 128, 195, 78, 66, 215, 61, 156, 180
    ];
    // To remove the need for index wrapping, double the permutation table length
    let perm = new Array(512);
    let gradP = new Array(512);
    // This isn't a very good seeding function, but it works ok. It supports 2^16
    // different seed values. Write something better if you need more seeds.
    function seed(seed) {
      if (seed > 0 && seed < 1) {
        // Scale the seed out
        seed *= 65536;
      }
      seed = Math.floor(seed);
      if (seed < 256) {
        seed |= seed << 8;
      }
      for (let i = 0; i < 256; i++) {
        let v;
        if (i & 1) {
          v = p[i] ^ (seed & 255);
        } else {
          v = p[i] ^ ((seed >> 8) & 255);
        }
        perm[i] = perm[i + 256] = v;
        gradP[i] = gradP[i + 256] = grad3[v % 12];
      }
    }
    seed(0);
    // ##### Perlin noise stuff
    function fade(t) {
      return t * t * t * (t * (t * 6 - 15) + 10);
    }
    function lerp(a, b, t) {
      return (1 - t) * a + t * b;
    }
    // 2D Perlin Noise
    function perlin2(x, y) {
      // Find unit grid cell containing point
      let X = Math.floor(x),
        Y = Math.floor(y);
      // Get relative xy coordinates of point within that cell
      x = x - X;
      y = y - Y;
      // Wrap the integer cells at 255 (smaller integer period can be introduced here)
      X = X & 255;
      Y = Y & 255;
      // Calculate noise contributions from each of the four corners
      let n00 = gradP[X + perm[Y]].dot2(x, y);
      let n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1);
      let n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y);
      let n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1);
      // Compute the fade curve value for x
      let u = fade(x);
      // Interpolate the four results
      return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y));
    }
    return {
      seed,
      perlin2
    };
  }


  const option = {
    //鼠标悬浮提示
    tooltip: {},
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'category',
      data: yData
    },
    visualMap: {
      min: 0,
      max: 1,
      calculable: false,
      realtime: false,
      inRange: {
        color: [
          '#313695',
          '#4575b4',
          '#74add1',
          '#abd9e9',
          '#e0f3f8',
          '#ffffbf',
          '#fee090',
          '#fdae61',
          '#f46d43',
          '#d73027',
          '#a50026'
        ]
      }
    },
    series: [
      {
        name: 'Gaussian',
        type: 'heatmap',
        data: chartData,
        emphasis: {
          itemStyle: {
            borderColor: '#333',
            borderWidth: 1
          }
        },
        progressive: 1000,
        animation: false
      }
    ]
  }
  return option
};



